<template>
	<view>
		<view class="picker-modal" v-if="show"></view>
		<view class="picker-content" :style="{transform:  show ? 'translateY(0)' : 'translateY(100%)'}">
			<view class="picker-header">
				<view @click="onClose">取消</view>
				 <view class="packer-title">{{ title }}</view>
				<view @click="onConfirm">确定</view>
			</view>
			<picker-view indicator-style="height: 90rpx;" class="picker-view" :value="value" @change="onChange">
				<picker-view-column>
					<view class="picker-item" v-for="(item, index) in listData" :key="item.id">{{item.deviceName}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	import { getDeviceName } from '@/api/repair/repair.js'
	export default{
		props:{
			//标题文字
			title: {
				type: String,
				default: ""
			},
			deviceGroupId: {
				type: String,
				default: ""
			},
			deviceTypeId: {
				type: [String, Number],
				default: ""
			}
		}, 
		data(){
			return{
				show: false,
				value: [0],
				listData:[]
			}
		},
		methods:{
			// 打开
			open(){
				this.show = true
				this.getData()
			},
			getData(){
				getDeviceName({
					pageNum: 1,
					pageSize: 10000,
					deviceGroupId: this.deviceGroupId,
					deviceTypeId: this.deviceTypeId
				}).then(res =>{
					this.listData = res.rows
				})
			},
			//确定
			onConfirm(){
				this.show = false
				const selectData =  {
					value: this.listData[this.value[0]].id,
					name: this.listData[this.value[0]].deviceName
				}
				this.$emit('confirm', selectData) 
			},
			// 取消
			onClose(){
				this.show = false
			},
			//滑动picker
			onChange(e) {
				this.value = e.detail.value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.picker-modal{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.picker-content{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		background-color: #fff;
		transition: all .3s;
	}
	.picker-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin:0 20rpx;
		padding: 20rpx 0;
	}
	.packer-title{
		text-align: center;
	}
	.picker-view {
		position: relative;
		bottom: 0;
		left: 0;
		right: 0;
		height: 490rpx;
		background-color: rgba(255, 255, 255, 1);
	}
	.picker-item {
		text-align: center;
		line-height: 46px;
		text-overflow: ellipsis;
	}
</style>
